<template>
  <div class="body2">
    <head-nav></head-nav>
    <div class="center">
      <div class="cent-left">
        <div class="c-l-1">
          <div class="search">
            <span class="el-icon-search"></span>
            <input type="text" placeholder="输入景点名称" v-model="search">
          </div>
          <input type="button" value="搜索" class="inputt">
          <div class="ditu"><span class="el-icon-map-location"></span></div>
        </div>
        <div class="c-l-2">
          <el-tabs type="border-card">
            <el-tab-pane label="猜你喜欢">
              <div class="c-l-3">
                <ul>
                  <li v-for="item in items1.slice((currentPage-1) * pagesize, currentPage * pagesize)" :key="item.id">
                    <div><img :src="item.imgSrc"/></div>
                    <div class="c-l-3-right">
                      <div>{{item.title1}}</div>
                      <div>{{item.title2}}</div>
                      <div>{{item.address}}</div>
                      <div>地址：{{item.address1}}</div>
                    </div>
                    <div class="c-l-3-right1">
                      <div @click="goWatch(item.id)">查看景点 <span class="el-icon-s-unfold"></span></div>
                    </div>
                  </li>
                </ul>
              </div>
              <el-pagination
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
                      :current-page="currentPage"
                      :page-sizes="[3,6,9]"
                      background
                      :page-size="pagesize"
                      layout="total,sizes,prev, pager, next,jumper"
                      :total="total">
              </el-pagination>
            </el-tab-pane>
            <el-tab-pane label="人气推荐">
              <div class="c-l-3">
                <ul>
                  <li v-for="(item,index) in items.slice((currentPage-1) * pagesize, currentPage * pagesize)" :key="item.id">
                    <div><img :src="item.imgSrc"/></div>
                    <div class="c-l-3-right">
                      <div>{{item.title1}}</div>
                      <div>{{item.title2}}</div>
                      <div>{{item.address}}</div>
                      <div>地址：{{item.address1}}</div>
                    </div>
                    <div class="c-l-3-right1">
                      <div @click="goWatch(index)">查看景点 <span class="el-icon-s-unfold"></span></div>
                    </div>
                  </li>
<!--
                  <li v-for="(item,index) in jingdianList.slice((currentPage-1) * pagesize, currentPage * pagesize)" :key="index">
                    <div><img :src="item.imgSrc"/></div>
                    <div class="c-l-3-right">
                      <div>{{item.title1}}</div>
                      <div>{{item.title2}}</div>
                      <div>{{item.address}}</div>
                      <div>地址：{{item.address1}}</div>
                    </div>
                    <div class="c-l-3-right1">
                      <div @click="goWatch(index)">查看景点 <span class="el-icon-s-unfold"></span></div>
                    </div>
                  </li>
-->
                </ul>
              </div>
              <el-pagination
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
                      :current-page="currentPage"
                      :page-sizes="[3,6,9]"
                      background
                      :page-size="pagesize"
                      layout="total,sizes,prev, pager, next,jumper"
                      :total="total">
              </el-pagination>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
      <div class="cent-right">
        <div class="lkz">
          <div><h3>立刻走</h3></div>
          <ul>
          <li>
            <div><span class="el-icon-odometer"></span>全面覆盖</div>
            <div>2万景区，门票联票，应有尽有</div>
          </li>
          <li>
            <div><span class="el-icon-postcard"></span>全面覆盖</div>
            <div>2万景区，门票联票，应有尽有</div>
          </li>
          <li>
            <div><span class="el-icon-price-tag"></span>全面覆盖</div>
            <div>2万景区，门票联票，应有尽有</div>
          </li>
          <li>
            <div><span class="el-icon-table-lamp"></span>全面覆盖</div>
            <div>2万景区，门票联票，应有尽有</div>
          </li>
        </ul>
        </div>
      </div>
    </div>
    <foot-nav></foot-nav>
  </div>
</template>

<script>
  import HeadNav from "@/components/HeadNav";
  import FootNav from "@/components/FootNav";
  export default {
    name: 'jingdian',
    components: {FootNav, HeadNav},
    data(){
      return{
        boxShow:false,
        jingdianList:[
                {id:0,imgSrc:require('../../assets/qd/qd01.jpg'),title1:'八水河',title2:'',address:'[山东·青岛·崂山区]',address1:'青岛市崂山区梅岭路29号崂山太清景区内'},
                {id:1,imgSrc:require('../../assets/qd/qd02.jpg'),title1:'翠林云庄乡村乐园',title2:'',address:'[山东·青岛·城阳]',address1:'青岛市城阳区棘洪滩街道东毛家庄社区'},
                {id:2,imgSrc:require('../../assets/qd/qd03.jpg'),title1:'大珠山风景区',title2:'4A景区',address:'[山东·青岛·胶南区]',address1:'青岛胶南滨海街道办事处大珠山景区'},
                {id:3,imgSrc:require('../../assets/qd/qd04.jpg'),title1:'海风滑翔基地',title2:'',address:'[山东·青岛·即墨区]',address1:'青岛市即墨区鹤山东路港中旅西侧四舍山'},
                {id:4,imgSrc:require('../../assets/qd/qd05.jpg'),title1:'鹤山',title2:'',address:'[山东·青岛·即墨区]',address1:'青岛即墨市鳌山卫镇南4公里（近双星度假村西侧）'},
                {id:5,imgSrc:require('../../assets/qd/qd06.jpg'),title1:'海信科学探索中心',title2:'',address:'[山东·青岛·市南区]',address1:'青岛市南区江西路11号'},
                {id:6,imgSrc:require('../../assets/qd/qd07.jpg'),title1:'崂山',title2:'5A景区',address:'[山东·青岛·崂山区]',address1:'青岛市崂山区崂山风景区'},
                {id:7,imgSrc:require('../../assets/qd/qd08.jpg'),title1:'崂山巨峰游览区',title2:'',address:'[山东·青岛·崂山区]',address1:'青岛市崂山区崂山风景区内'},
                {id:8,imgSrc:require('../../assets/qd/qd09.jpg'),title1:'崂山九水游览区',title2:'',address:'[山东·青岛·崂山区]',address1:'青岛市崂山风景区九水游览区'},
                {id:9,imgSrc:require('../../assets/qd/qd10.jpg'),title1:'崂山仰口游览区',title2:'',address:'[山东·青岛·崂山区]',address1:'青岛市崂山区王哥庄街道仰口风景区'},
                {id:10,imgSrc:require('../../assets/qd/qd11.jpg'),title1:'琅琊台风景区',title2:'4A景区',address:'[山东·青岛·胶南区]',address1:'青岛市黄岛区（原胶南市）西南海滨青岛琅琊台省级旅游度假区内'},
                {id:11,imgSrc:require('../../assets/qd/qd12.jpg'),title1:'青岛茶山景区',title2:'4A景区',address:'[山东·青岛·平度]',address1:'青岛市平度市店子镇'},
                {id:12,imgSrc:require('../../assets/qd/qd13.jpg'),title1:'德国总督楼旧址博物馆',title2:'',address:'[山东·青岛·市南区]',address1:'青岛市市南区龙山路26号'},
                {id:13,imgSrc:require('../../assets/qd/qd14.jpg'),title1:'青岛动物园',title2:'',address:'[山东·青岛·市北区]',address1:'青岛市市南区延安一路102号'},
                {id:14,imgSrc:require('../../assets/qd/qd15.png'),title1:'青岛方特梦幻王国',title2:'4A景区',address:'[山东·青岛·城阳区]',address1:'青岛市城阳区红岛街道岙东南路'},
                {id:15,imgSrc:require('../../assets/qd/qd16.jpg'),title1:'青岛海昌极地海洋公园',title2:'4A景区',address:'[山东·青岛·崂山区]',address1:'青岛市东海东路60号'},
                {id:16,imgSrc:require('../../assets/qd/qd17.jpg'),title1:'青岛海底世界',title2:'4A景区',address:'[山东·青岛·市南区]',address1:'青岛市市南区莱阳路2号'},
                {id:17,imgSrc:require('../../assets/qd/qd18.jpg'),title1:'青岛海上观光',title2:'',address:'[山东·青岛·市南区]',address1:'青岛市市南区西陵峡路9号青岛友谊国际游艇俱乐部'},
                {id:18,imgSrc:require('../../assets/qd/qd19.jpg'),title1:'青岛啤酒博物馆',title2:'4A景区',address:'[山东·青岛·市北区]',address1:'青岛市市北区登州路56号青岛啤酒博物馆'},
                {id:19,imgSrc:require('../../assets/qd/qd20.png'),title1:'青岛葡萄酒博物馆',title2:'4A景区',address:'[山东·青岛·市北区]',address1:'青岛市市北区延安一路68号'},
                {id:20,imgSrc:require('../../assets/qd/qd21.jpg'),title1:'青岛青峰毛公山',title2:'',address:'[山东·青岛·城阳区]',address1:'青岛市城阳区惜福镇街道青峰社区'},
                {id:21,imgSrc:require('../../assets/qd/qd22.jpg'),title1:'青岛世博园',title2:'4A景区',address:'[山东·青岛·百果山都市休闲风景区]',address1:'青岛市李沧区世园大道（长水路）'},
                {id:22,imgSrc:require('../../assets/qd/qd23.jpg'),title1:'青岛森林野生动物世界',title2:'4A景区',address:'[山东·青岛·黄岛区]',address1:'青岛市黄岛区珠山风景区（灵珠山）'},
                {id:23,imgSrc:require('../../assets/qd/qd24.jpg'),title1:'青岛天主教堂',title2:'',address:'[山东·青岛·市南区]',address1:'青岛市市南区浙江路15号'},
                {id:24,imgSrc:require('../../assets/qd/qd25.jpg'),title1:'青岛西海岸生态观光园',title2:'',address:'[山东·青岛·黄岛区]',address1:'青岛市黄岛区灵山湾影视文化产业区西侧胶州湾东路3666号'},
                {id:25,imgSrc:require('../../assets/qd/qd26.jpg'),title1:'信号山公园',title2:'3A景区',address:'[山东·青岛·市南区]',address1:'青岛市市南区齐东路17号、龙口路16号甲'},
                {id:26,imgSrc:require('../../assets/qd/qd27.jpg'),title1:'羊毛沟花海湿地',title2:'',address:'[山东·青岛·城阳区]',address1:'青岛市城阳区春阳路与正源路交叉口西侧20米'},
                {id:27,imgSrc:require('../../assets/qd/qd28.jpg'),title1:'中国水准零点景区',title2:'',address:'[山东·青岛·市南区]',address1:'青岛市市南区东海中路30号银海大世界内'},
                {id:28,imgSrc:require('../../assets/qd/qd29.jpg'),title1:'珠山国家森林公园',title2:'4A景区',address:'[山东·青岛·黄岛区]',address1:'青岛市经济开发区灵珠山街道木厂口村'},
                ],
        num:0,
        currentPage: 1,
        pagesize:3,
        total:null,
        search:''
      };
    },
    computed: {
      items(){
        return this.jingdianList.filter((item)=>{
          return item.title1.indexOf(this.search)!==-1
        })
      },
      items1(){
        return this.jingdianList.filter((item)=>{
          return item.title1.indexOf(this.search)!==-1
        })
      }

    },
    mounted() {
      var arr1=Object.keys(this.jingdianList)
      this.total=arr1.length
    },
    methods: {
      goWatch(id){
        this.$router.push({
          path:`/watch/${id}`
        })
      },
      handleSizeChange(val){
        this.pagesize=val
      },
      handleCurrentChange(val){
        this.currentPage=val
      },


    },
  }
  </script>

<style scoped>
  *{
    margin: 0;
    padding: 0;
  }
  .center{
    width: 1190px;
    min-height: 360px;
    margin: 10px auto;
    border-radius: 5px;
    text-align: left;
    display: flex;
  }
  .cent-left{
    display: flex;
    flex-direction: column;
  }
  .c-l-1{
    display: flex;
  }
  .cent-right{
    width: 300px;
    margin-left: 20px;
  }
  .lkz{
    border:1px solid #00d0d4;
    margin-top: 10px;
  }
  .lkz h3{
    margin: 10px 10px 0 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #00d0d4;
  }
  .lkz li{
    list-style: none;
    height: 70px;
    line-height: 35px;
    border-bottom: 1px dashed #d6d6d6;
    margin: 10px 10px 0 10px;
  }
  .lkz li>div:nth-of-type(1){
    color: #3e8fba;
  }
  .search{
    width: 700px;
    height: 50px;
    border: 2px solid rgb(28,175,197);
    margin-top: 10px;
    background: white;
  }
  .search span{
    font-size: 30px;
    color: #d6d6d6;
  }
  .search input{
    border: none;
    height: 50px;
    width: 600px;
    font-size: 20px;
    margin-left: 5px;
  }
  .inputt{
    border: none;
    height: 54px;
    width: 128px;
    color: white;
    background: rgb(28,175,197);
    font-size: 20px;
    margin-top: 10px;
  }
  .ditu{
    width: 50px;
    height: 50px;
    font-size: 40px;
    color: #d6d6d6;
    background: white;
    border: 1px solid #d6d6d6;
    text-align: center;
    margin-left: 10px;
    margin-top: 10px;
  }
  .c-l-2{
    margin-top: 10px;
    border:1px solid lightgray ;
  }
  .c-l-3{
    margin-top: 10px;
  }
  .c-l-3 li{
    display: flex;
    margin: 10px 0;
    border:1px solid lightgray ;
    border-bottom: 1px dashed lightgray;
  }
  .c-l-3-right{
    display: flex;
    flex-direction: column;
    border-right: 1px dashed lightgray;
    padding-right: 100px;
    width: 260px;
  }
  .c-l-3-right div{
    margin: 5px 0 10px 10px;
  }
  .c-l-3-right div:nth-of-type(1){
    font-size: 25px;
    font-weight: bold;
  }
  .c-l-3-right div:nth-of-type(2){
    font-size: 13px;
    font-weight: bold;
    color: #ff4d4d;
  }
  .c-l-3-right div:nth-of-type(3){
    font-size: 13px;
    color: #808080;
  }
  .c-l-3-right div:nth-of-type(4){
    font-size: 13px;
    color: #000000;
  }
  .c-l-3-right1 div{
    color: white;
    font-weight: bold;
    background: #1cafc5;
    line-height: 40px;
    width: 100px;
    text-align: center;
    margin-top: 80px;
    margin-left: 70px;
  }
  /deep/ .el-tabs__item.is-active {
    color: rgb(28,175,197) !important;
  }
  /deep/ .el-tabs__item:hover {
    color: rgb(28,175,197) !important;
  }
  /deep/ .el-tabs__active-bar.is-top {
    background: rgb(28,175,197) !important;
  }
</style>
